$(function(){

   //ajax链接获取数据，关于视频src，图片url，text文件
    let videoData = [];
    let videoPlayers = '';
    let videoNum = 0;
    let videoNext = 0;
    let mv = document.getElementById('mv');

    $.ajax({
        "url" : 'videoData',
        "method" : 'GET',
        "data" : {"user":'admin', "password":"clearlove"},
        success : function(data){
         
            videoData = data;
   
            videoAdd();

        },
        error : err =>{
            throw new Error(err);
        }
    })
///增加视频的函数 
    function videoAdd(){
        
        videoNext+3 > videoData.length? videoNext = videoData.length : videoNext +=3;
        for( let index =videoNum; index < videoNext; index++){
      
            $('#mv').html(`${$('#mv').html()}	
             <div class="mv" >
                    <video width="900" height="" src="" controls="controls" class="videoPlayer">
                    抱歉，您的浏览器不支持H5-video功能，请更换浏览器
                    </video>
                    <a href="#" style="font-weight:200;">${videoData[index].about}</a>
                    <div class="video-control">    
                            <img src="img/videoStop.jpg" alt="">
                    </div>
                    <div class="video-bgr-img">    
                            <img src="${videoData[index].img}" alt="">
                    </div>
             </div>`);
            }
            videoNum = videoNext;
                videoPlayers = document.getElementsByClassName('videoPlayer');
                $('.video-control').each(function(index){
                    $(this).attr('index', index);
                    $(this).click(function(){
                    $(this).css('display', 'none');
                    $('.video-bgr-img').eq($(this).attr('index')).css('display', 'none');
                    $('.videoPlayer').eq($(this).attr('index')).attr('src', videoData[$(this).attr('index')].src);   
                    videoPlayers[$(this).attr('index')].play();
                })
            })

       }
////懒加载
            mv.onscroll = function(){
                
                if(this.scrollHeight-this.scrollTop <= this.clientHeight + 50){
                   videoAdd();
                }
            }

})